<template>
	<div class="productProcess">
		
		<!-- 如果页面刷新数据比较频繁，可以将loading、showFlag的相关代码删除，防止过于频繁的出现加载动画 -->
		<div class="loading_div" v-show="!showFlag">
			<div>Loading...</div>  <!-- 这个loading自己写，代码没贴出来 -->
		</div>
		
		<div class="success_info_body" v-show="showFlag">
			<!-- 参数名称、列数根据实际情况调整 -->
			<div class="table_body">
				<div class="table_th">
					<div class="tr1 th_style">排名</div>
					<div class="tr2 th_style">姓名</div>
					<div class="tr3 th_style">学籍号</div>
					<div class="tr4 th_style">成绩</div>
					<div class="tr5 th_style">项目</div>
					<div class="tr6 th_style">班级</div>
					<div class="tr7 th_style">学院</div>
					<div class="tr8 th_style">年级</div>
				</div>
				<div class="table_main_body">
					<div class="table_inner_body" :style="{top: tableTop + 'px'}">
						<div class="table_tr" v-for="(item,index) in tableList" :key="index" :class="index%2==0?'bgShen':''">
							<div class="tr1 tr">{{item.index}}</div>
							<div class="tr2 tr">{{item.realname}}</div>
							<div class="tr3 tr" v-if="item.testerNumber!='-'">{{ item.testerNumber }}</div>
							<div class="tr3 tr" v-else>-</div>
							<div class="tr4 tr" v-if="item.score!='-'">{{ item.score }} </div>
							<div class="tr4 tr" v-else>-</div>
							<div class="tr5 tr" v-if="item.projectName!='-'">{{ item.projectName }} </div>
							<div class="tr5 tr" v-else>-</div>
							<div class="tr6 tr" v-if="item.clazz!='-'">{{ item.clazz }} </div>
							<div class="tr6 tr" v-else>-</div>
							<div class="tr7 tr" v-if="item.departName!='-'">{{ item.departName }} </div>
							<div class="tr7 tr" v-else>-</div>
							<div class="tr8 tr" v-if="item.grade!='-'">{{ item.grade }} </div>
							<div class="tr8 tr" v-else>-</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showFlag: true,
			tableTimer: null,
			tableTop: 0,
			//需要根据情况设置的参数
			visibleSize:10, //容器内可视最大完整行数
			lineHeight: 40, //每行的实际高度（包含margin-top/bottom,border等）
			componentTimerInterval: 3600000, //刷新数据的时间间隔
			tableTimerInterval: 100 //向上滚动 1px 所需要的时间，越小越快，推荐值 100
		};
	},
	
	//如果没有父元素传值，将watch内的内容搬至mounted中即可
	props: {
		activeFactoryId   : {
			type: String
		},
		tableList: {
			type    : Array,
			required: false,
			default() {
				return []
			}
		},
	},
	watch: {
		activeFactoryId(val, oldVal) {
			console.log("====111111")
			
		}
	},
	mounted() {
		if(this.tableList.length>this.visibleSize){
			this.tableTimerFun();
		} else {
			this.fillTableList();
		}
	},
	beforeDestroy() {
		clearInterval(this.tableTimer);
	},
	methods: {
		//当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
		fillTableList() {
			var addLength = this.visibleSize - this.tableList.length;
			this.$emit('tianchongTable',addLength)
		},
		tableTimerFun() {
			var count = 0;
			this.tableTimer = setInterval(() => {
				if (count < (this.tableList.length / 2) * this.lineHeight) {
					this.tableTop -= 1;
					count++;
				} else {
					count = 0;
					this.tableTop = 0;
				}
			}, this.tableTimerInterval);
		}
	}
};
</script>

<style scoped>
.productProcess {
	width: 100%;
	height: 100%;
}
.loading_div {
	color: #eee;
	padding-top: 100px;
}
.title_div {
	width: 100%;
}
.table_body {
	width: 100%;
	margin-top: 15px;
}
.table_th {
	width: 100%;
	display: flex;
	height: 40px;
	line-height: 40px;
}
.tr {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 5px;
	text-align: center;
	font-size: 14px;
}
.tr1 {
	width: 6%;
}
.tr2 {
	width: 10%;
}
.tr3 {
	width: 15%;
}

.tr4 {
	width: 8%;
}
.tr5 {
	width: 15%;
}
.tr6 {
	width: 18%;
}
.tr7 {
	width: 15%
}

.tr8 {
	width: 8%
}
.th_style {
	color: rgb(0, 221, 253);
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 5px;
	text-align: center;
}
.table_main_body {
	width: 100%;
	height: 45vh;
	overflow: hidden;
	position: relative;
}
.table_inner_body {
	width: 100%;
	position: absolute;
	left: 0;
}
.table_tr {
	display: flex;
	height: 40px;
	line-height: 40px;
	color: #eee;
	font-size: 15px;
	background: rgba(3, 145, 167, 0.1);
}
.bgShen{
	background: #28466F;
}
</style>